<template>
    <div>
        <el-card>
            <b-button @click="openDrawer('ltr')">从左打开</b-button>
            <b-button @click="openDrawer('rtl')">从右打开</b-button>
            <b-button @click="openDrawer('ttb')">从顶打开</b-button>
            <b-button @click="openDrawer('btt')">从底打开</b-button>
            <b-drawer v-model:modelValue="modelValue" :direction="direction">
                主要内容
            </b-drawer>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import BDrawer from '@/components/BDrawer.vue';
import BButton from '@/components/BButton.vue';
const modelValue = ref(false);

// 初始化文本方向为左到右（ltr）
const direction = ref('ltr');
/**
 * 打开抽屉函数
 * 
 * 该函数用于将抽屉的状态设置为打开。在Vue组件中，`modelValue`通常是一个响应式变量，
 * 用于控制抽屉的显示状态。通过将`modelValue`的值设置为`true`，可以触发抽屉的显示。
 * 
 * 注意：此函数假设`modelValue`已经通过`ref`或类似方法在组件中被定义和初始化。
 */
const openDrawer = (e) => {
    modelValue.value = true
    direction.value = e;
}


</script>

<style scoped lang='scss'></style>
